﻿@{
    Layout = "~/Views/Shared/_GlobalArgLayout.cshtml";
}


<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>统计图表</title>
    <link href="~/Content/Css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/Css/animate.min.css" rel="stylesheet" />
    <link href="~/Content/Css/style.min.css" rel="stylesheet" />

</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>销售金额趋势</h5>
                        <div class="ibox-tools">
                            <select id="amountday" onchange="reLoadSaleAmountChartSelect()">
                                <option value="3">近3天</option>
                                <option value="7" selected>近7天</option>
                                <option value="15">近15天</option>
                                <option value="30">近30天</option>
                            </select>
                            <a onclick="reLoadSaleAmountChart()">
                                <i class="fa fa-refresh"></i>
                            </a>


                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="saleamountchart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5 id="saledetail">金额占比</h5>
                        <div class="ibox-tools">
                            <a onclick="reLoadSaleAmountPie()">
                                <i class="fa fa-refresh"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="saleamountpie"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>销售数量趋势</h5>
                        <div class="ibox-tools">
                            <select id="countday" onchange="reLoadSaleCountChartSelect()">
                                <option value="3">近3天</option>
                                <option value="7" selected>近7天</option>
                                <option value="15">近15天</option>
                                <option value="30">近30天</option>
                            </select>
                            <a onclick="reLoadSaleCountChart()">
                                <i class="fa fa-refresh"></i>
                            </a>


                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="salecountchart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5 id="saledetail">数量占比</h5>
                        <div class="ibox-tools">
                            <a onclick="reLoadSaleCountPie()">
                                <i class="fa fa-refresh"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="salecountpie"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>散点图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-scatter-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>K线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-k-chart"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>雷达图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-radar-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>和弦图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-chord-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>仪表盘</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-gauge-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>漏斗图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-funnel-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>力导向布局图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-force-chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>中国地图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="graph_flot.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" id="echarts-map-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        -->
    </div>
    <!-- 全局js -->
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

    <script src="~/Scripts/plugins/echarts/echarts.min.js"></script>
    <script src="~/Scripts/content.min.js"></script>
    @Scripts.Render("~/bundles/base")
    @*<script src="~/Js/demo/echarts-demo.js"></script>*@
    <script>
        var lineAmountChart
        var lineCountChart
        var xAmountData = [];
        var xCountData = [];
        var amountPieData = [];
        var countPieData = [];
        $(function () {
            lineAmountChart = echarts.init(document.getElementById("saleamountchart"));
            lineCountChart = echarts.init(document.getElementById("salecountchart"));
            reLoadSaleAmountChart();
            reLoadSaleCountChart();
            var date = new Date();
            var month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            var datestr = date.getFullYear() + '-' + month + '-' + date.getDate()
            reLoadSaleAmountPie();
            reLoadSaleCountPie();
            lineAmountChart.on('updateAxisPointer', amountChartAxisPointer);
            lineCountChart.on('updateAxisPointer', countChartAxisPointer);
        });
        function reLoadSaleAmountChartSelect() {
            reLoadSaleAmountChart();
            reLoadSaleAmountPie();
        }
        function reLoadSaleAmountChart() {
            var day = $("#amountday").val();
            AjaxPost("/Home/GetBoardData/SaleAmount/" + day, {}, function (boarddata) {
                var legendData = [];
                var xAxisData = [];
                var seriesData = [];
                boarddata[0].forEach(function (item, index) {
                    legendData.push(item.Name);
                })
                boarddata[1].forEach(function (item, index) {
                    xAxisData.push({ value: item.Name, text: item.Name });
                })
                xAmountData = xAxisData;
                boarddata[2].forEach(function (item, index) {
                    var svalue = [];
                    boarddata[1].forEach(function (d, i) {
                        svalue.push({ value: $numberUtils.toDig2(item[d.DName]), totaltitle: item["TotalTitle"], title: item["Title"], totalAmount: item["TotalAmount"] });
                    })
                    seriesData.push({ name: item.Title, type: 'line', data: svalue });
                })

                var lineoption = {
                    title: {
                        text: '近' + day + '天销售金额情况'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var tip = "";
                            var total = 0;
                            params.forEach(function (item, index) {
                                total = total + $numberUtils.toDig2(item.data.value);
                            });
                            params.forEach(function (item, index) {
                                var rate = total == 0 ? 0 : $numberUtils.toDig2((item.data.value * 100 / total));

                                tip = tip + item.data.title + '：' + item.data.value + '，占比：' + rate + '%<br/>'
                            });

                            return tip;
                        }
                    },
                    legend: {
                        data: legendData
                    },
                    grid: {
                        x: 40,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxisData,
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    series: seriesData,
                    grid: {
                        borderWidth: 0
                    }
                };
                //这里需要先清空，否则图表上面显示的数据是上次的部分数
                lineAmountChart.clear();
                lineAmountChart.setOption(lineoption);
                $(window).resize(lineAmountChart.resize);
            })
        }
        function reLoadSaleCountChartSelect() {
            reLoadSaleCountChart();
            reLoadSaleCountPie();
        }
        function reLoadSaleCountChart() {
            var day = $("#countday").val();
            AjaxPost("/Home/GetBoardData/SaleCount/" + day, {}, function (boarddata) {
                var legendData = [];
                var xAxisData = [];
                var seriesData = [];
                boarddata[0].forEach(function (item, index) {
                    legendData.push(item.Name);
                })
                boarddata[1].forEach(function (item, index) {
                    xAxisData.push({ value: item.Name, text: item.Name });
                })
                xCountData = xAxisData;
                boarddata[2].forEach(function (item, index) {
                    var svalue = [];
                    boarddata[1].forEach(function (d, i) {
                        svalue.push({ value: $numberUtils.toDig2(item[d.DName]), totaltitle: item["TotalTitle"], title: item["Title"], totalAmount: item["TotalAmount"] });
                    })
                    seriesData.push({ name: item.Title, type: 'line', data: svalue });
                })
                var lineoption = {
                    title: {
                        text: '近' + day + '天销售数量情况'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var tip = "";
                            var total = 0;
                            params.forEach(function (item, index) {
                                total = total + $numberUtils.toDig2(item.data.value);
                            });
                            params.forEach(function (item, index) {
                                var rate = total == 0 ? 0 : $numberUtils.toDig2((item.data.value * 100 / total));

                                tip = tip + item.data.title + '：' + item.data.value + '，占比：' + rate + '%<br/>'
                            });

                            return tip;
                        }
                    },
                    legend: {
                        data: legendData
                    },
                    grid: {
                        x: 40,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxisData,
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    series: seriesData,
                    grid: {
                        borderWidth: 0
                    }
                };
                lineCountChart.clear();
                lineCountChart.setOption(lineoption);
                $(window).resize(lineCountChart.resize);
            })
        }

        function reLoadSaleAmountPie(date) {

            var initAmountPie = function (boarddata) {
                var legenddata = [];
                var seriesData = [];
                amountPieData = boarddata;
                var resData = [];
                var title = "";
                if (!String.IsNullOrEmpty(date)) {
                    title = date + '销售金额占比情况'
                    amountPieData[0].forEach(function (item, index) {
                        if (item.dAddDate == date)
                            resData.push(item);
                    })
                }
                resData.forEach(function (item, index) {
                    legenddata.push(item.Name + "-" + item.SkuName);
                })
                resData.forEach(function (item, index) {
                    seriesData.push({ value: item.Total, name: item.Name + "-" + item.SkuName });
                })

                var pieChart = echarts.init(document.getElementById("saleamountpie"));
                var pieoption = {
                    title: {
                        text: title,
                        //subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: legenddata
                    },
                    calculable: true,
                    series: [
                        {
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: seriesData
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            }
            if (String.IsNullOrEmpty(date) || (amountPieData && amountPieData.length==0)) {
                var day = $("#amountday").val();
                AjaxPost("/Home/GetBoardData/SaleAmountPie/" + day, { date: date }, initAmountPie)
            } else
                initAmountPie(amountPieData)
        }

        function reLoadSaleCountPie(date) {

            var initAmountPie = function (boarddata) {
                var legenddata = [];
                var seriesData = [];
                countPieData = boarddata;
                var resData = [];
                var title = "";
                if (!String.IsNullOrEmpty(date)) {
                    title = date + '销售数量占比情况'
                    countPieData[0].forEach(function (item, index) {
                        if (item.dAddDate == date)
                            resData.push(item);
                    })
                }
                resData.forEach(function (item, index) {
                    legenddata.push(item.Name + "-" + item.SkuName);
                })
                resData.forEach(function (item, index) {
                    seriesData.push({ value: item.Total, name: item.Name + "-" + item.SkuName });
                })

                var pieChart = echarts.init(document.getElementById("salecountpie"));
                var pieoption = {
                    title: {
                        text: title,
                        //subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: legenddata
                    },
                    calculable: true,
                    series: [
                        {
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: seriesData
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);
            }
            if (String.IsNullOrEmpty(date) || (countPieData && countPieData.length==0)) {
                var day = $("#countday").val();
                AjaxPost("/Home/GetBoardData/SaleCountPie/" + day, { date: date }, initAmountPie)
            } else
                initAmountPie(countPieData)
        }

        function amountChartAxisPointer(e) {
            if (e) {
                var xAxisInfo = e.axesInfo[0];
                if (xAxisInfo)
                    reLoadSaleAmountPie(xAmountData[xAxisInfo.value].value);
            }
        }
        function countChartAxisPointer(e) {
            if (e) {
                var xAxisInfo = e.axesInfo[0];
                if (xAxisInfo)
                    reLoadSaleCountPie(xCountData[xAxisInfo.value].value);
            }
        }
    </script>
</body>

</html>
